
import React, { useState } from 'react';
import { Form, Button, Rate } from 'antd';
import YyQuill from '@/components/FormItem/components/YyQuill';

import avatar from '@/assets/img/avator.webp'
import AbIcon from '@/components/DecorateIcons/Ab_Icon';
import AbPagination from '@/PageCompnents/Pagination'

const YyQuillColum = {
  columnName: 'content',
  rules: [
    {
      required: true,
      message: '请输入评论',
    }
  ]
}
const discussList = [
  {
    id: "1",
    avatarurl: avatar,
    score: "3",
    nickname: "用户名1",
    content: "这是评论内容1"
  },
  {
    id: "2",
    avatarurl: avatar,
    score: "5",
    nickname: "用户名2",
    content: "这是评论内容2",
    childs: [
      {
        id: "3",
        avatarurl: avatar,
        nickname: "用户名3",
        content: "这是回复内容3"
      },
      {
        id: "4",
        avatarurl: avatar,
        nickname: "用户名4",
        content: "这是回复内容4"
      },
    ]
  },
]

function DiscussTab({ base, paginationBase }) {
  // 表单实例form
  const [form] = Form.useForm()

  return (
    <div className='discuss'>

      {/* 表单 */}
      <Form
        form={form}
        className='discuss-form'
        name="discuss-form"
        autoComplete="off"
        spellCheck={false}
      >

        {/* 富文本编辑 */}
        <YyQuill column={YyQuillColum} />

        {/* 评分 */}
        <Form.Item
          name='score'
          rules={[{ required: true, message: '请输入评分' }]}
          className='score-item'
        >
          <Rate character={<AbIcon iconName={base.score_icon} />} />
        </Form.Item>


        <div className="btn">
          <Button type="primary" className='submit' htmlType='submit'>
            {base.ok_btn}
          </Button>

          <Button className='reset'>
            {base.reset_btn}
          </Button>
        </div>

      </Form>

      {/* 评论列表 */}
      <div className='comment-wrapper'>
        {
          discussList.map(item => (
            <div key={item.id} className='comment-item'>

              <div className='comment'>
                <img src={item.avatarurl} className='avatar' />

                <div className='name-box'>
                  <div className='name'>{item.nickname}</div>
                  <Rate className='score' value={item.score} disabled character={<AbIcon iconName={base.score_icon} />} />
                </div>

                <div className="content" dangerouslySetInnerHTML={{ __html: item.content }}></div>

                <div className="btn-box" >
                  <Button className='reply'>回复</Button>
                  <Button className='delete'>删除</Button>
                </div>
              </div>

              {
                item.childs &&
                <div className='replycomment' >
                  {
                    item.childs.map(childItem => (
                      <div key={childItem.id} className='reply-item' >

                        <img src={childItem.avatarurl} className='avatar' />

                        <div className='name-box'>
                          <div className='name'>{childItem.nickname}</div>
                        </div>
                        <div className="content" dangerouslySetInnerHTML={{ __html: childItem.content }}></div>

                        <div className="btn-box" >
                          <Button className='delete'>删除</Button>
                        </div>

                      </div>
                    ))
                  }
                </div>

              }


            </div >
          ))
        }

      </div >

      {/* 分页 */}
      <AbPagination paginationBase={paginationBase} />

    </div>
  )
}
export default React.memo(DiscussTab)